import { Modal, List, Avatar, Space } from "antd"
import Icon from "@/components/Icon"
import './index.scss'

const IconList = ['icon-truck__easyic', 'icon-dahuoche', 'icon-lahuoche', 'icon-huoche1',
  'icon-xiaohuoche', 'icon-huoche2', 'icon-huoche3', 'icon-huoche4', 'icon-huoche5', 'icon-a-qichehuochekache'
]

const ShowRoad = ({ isModalOpen, handleOk, handleCancel, roadList }) => {
  // console.log(roadList)

  const formattedPaths = []
  const pathInfo = []
  
  if (roadList){
    for (let i = 0;i < roadList.length;i += 2) {
      const path = roadList[i]
      formattedPaths.push(path.map(node => node === 0 ? '配送中心' : `客户${node}`).join(" → "))
    }

    for (let i = 1;i < roadList.length;i += 2) {
      const info = roadList[i]
      pathInfo.push(info)
    }
  }

  // 打印或返回结果
  const showList = formattedPaths.map(item => {
    return <div>{item}</div>
  })

  // 路径信息描述
  const Description = ({ index }) => {
    const infoList = pathInfo[index]
    return (
      <div>
        <Space size={'middle'}>
          <span>客户数:{infoList[0]}</span>
          <span>总路程:{infoList[1]}</span>
          <span>总时间:{infoList[2]}</span>
          <span>等待时间:{infoList[3]}</span>
          <span>延误时间:{infoList[4]}</span>
          <span>送货量:{infoList[5]}</span>
          <span>取货量:{infoList[6]}</span>
        </Space>
      </div>
    )
  }

  let avatar_index = 0

  return (
    <div>
      <Modal
        title="路径展示"
        open={isModalOpen}
        width={1000}
        onOk={handleOk}
        onCancel={handleCancel}
        okText="确定"
        cancelText="取消"
      >
        <List
          itemLayout="vertical"
          bordered
          dataSource={showList}
          pagination={{
            onChange: (page) => {
              console.log(page)
            },
            hideOnSinglePage: true,
            pageSize: 4,
          }}
          renderItem={(item, index) => (
            <List.Item>
              <List.Item.Meta
                avatar={<Avatar className="avatar" src={<Icon type={IconList[avatar_index++ % IconList.length]} />} />}
                title={<div style={{}}>路径{index + 1}</div>}
                description={<Description index={index} />}
              />
              {item}
            </List.Item>
          )}
        />
      </Modal>
    </div>
  )
}

export default ShowRoad